/**
 * Created by ClearLiang on 2019/4/22
 * Function:
 * Desc:
 */
import React, {Component} from 'react';
import {StyleSheet, Text, View,Image} from 'react-native';
import CardView from './CardView';

class Item1 extends Component{
    render(): React.ReactNode {
        return (
            <View style={{flex:1,flexDirection:'row'}}>
                <View style={[styles.root]}>
                    <View style={styles.title}>
                        <Text style={styles.txt1}>{this.props.title}</Text>
                        <Text style={styles.subtitle}>{this.props.subtitle}</Text>
                    </View>
                    <View style={styles.body}>
                        <Image style={{flex:1,flexDirection:'row',marginRight:5,height:100}} source={{uri: this.props.img1}}/>
                        <Image style={{flex:1,flexDirection:'row',marginLeft:5,height:100}} source={{uri: this.props.img2}}/>
                    </View>
                </View>
            </View>
        );
    }
}

class Item2 extends Component{
    render(): React.ReactNode {
        return (
            <View style={{flex:1,flexDirection:'row'}}>
                <View style={[styles.root]}>
                    <View style={styles.title}>
                        <Text style={styles.txt1}></Text>
                        <Text style={styles.subtitle1}></Text>
                    </View>
                    <View style={styles.body}>
                        <Image style={{flex:1,flexDirection:'row',marginRight:5,height:100}} source={{uri: ''}}/>
                        <Image style={{flex:1,flexDirection:'row',marginLeft:5,height:100}} source={{uri: ''}}/>
                    </View>
                </View>
            </View>
        );
    }
}

export default class Item_Goods extends Component {

    // 初始化state
    constructor(props) {
        super(props);
        this.state = {
        };
    }

    render() {
        let goodsData = this.props.data;
        let list = [];

        goodsData.map(
            (item,index,origin)=>{
                if(index % 2 === 0){
                    let row;
                    if ((index*1) === (origin.length-1)) {//最后一个为奇数
                        row = (
                            <View key={index} style={styles.row}>
                                <Item1
                                    img1={item.img1}
                                    img2={item.img2}
                                    title={item.title}
                                    subtitle={item.subtitle}
                                />
                                <View style={{width:1,marginHorizontal:5,backgroundColor: '#F2F2F2'}}/>
                                <Item2/>
                            </View>);
                    } else {
                        row = (
                            <View key={index} style={styles.row}>
                                <Item1
                                    img1={item.img1}
                                    img2={item.img2}
                                    title={item.title}
                                    subtitle={item.subtitle}
                                />
                                <View style={{width:1,marginHorizontal:5,backgroundColor: '#F2F2F2'}}/>
                                <Item1
                                    img1={origin[index+1].img1}
                                    img2={origin[index+1].img2}
                                    title={origin[index+1].title}
                                    subtitle={origin[index+1].subtitle}
                                />
                            </View>);
                    }
                    list.push(row);
                }
            }
        );

        return (
            <CardView>
                {list}
            </CardView>
        );
    }
}

// 构建样式
const styles = StyleSheet.create({
    root:{
        flex:1,
        flexDirection:'column',
    },
    title:{
        flex:1,
        flexDirection:'row',
        alignItems:'center',
        justifyContent: 'center',
    },
    body:{
        flex:1,
        flexDirection:'row',
        justifyContent: 'space-between',
        marginVertical:10,
    },
    txt1:{
        fontSize:20,
        color:'#000000'
    },
    subtitle:{
        marginLeft:5,
        paddingHorizontal:1,
        borderRadius:5,
        fontSize: 12,
        color: '#FFFFFF',
        backgroundColor:'#49BEFF'
    },
    row: {
        flexDirection: 'row',
        marginBottom: 10,
    },
});